<template>
    <div class="lock_container">
        <div class="lock_form">
            <img class="lock_form_avatar" :src="state.userInfo.avatar" alt="">
            <div class="lock_form_title">{{ state.userInfo.username }}</div>
            <div class="lock_form_title">{{ nowTime.time }}</div>
            <input class="lock_form_pwd" type="password" placeholder="登录密码" v-model="password">
            <el-icon class="lockHandle" :size="50" color="#fff" @click="checkPwd(password)">
                <Lock />
            </el-icon>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const password = ref<String>();

const state = reactive<any>({
    userInfo: {
        avatar: "",
        username: "",
        password: "",
        time: {
            date: '',
            time: '',
            week: '',
            showIndex: 0
        }
    },
});

const nowTime = reactive<any>({
    date: '',
    time: '',
    week: '',
    showIndex: 0
});

onMounted(() => {
    const userInfo = localStorage.getItem("userInfo")
    let localUserInfo = userInfo ? JSON.parse(userInfo) : '';
    if (localUserInfo != "") {
        state.userInfo = localUserInfo;
    }
    window.addEventListener('keydown', keyDown);
})


onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
})


const keyDown = (e: { keyCode: number; }) => {
    //如果是回车则执行登录方法
    if (e.keyCode == 13) {
        checkPwd(password.value)
    }
}

const checkPwd = (password: any) => {
    if (password == state.userInfo.password) {
        router.go(-1)
    } else {
        ElMessage({
            message: '密码错误',
            type: 'warning',
        })
    }
}



// 获取时间接口

const getTime = async () => {
    var myDate = new Date()
    let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
    let day = myDate.getDate().toString().padStart(2, '0')
    let hour = myDate.getHours().toString().padStart(2, '0')
    let minutes = myDate.getMinutes().toString().padStart(2, '0')
    let seconed = myDate.getSeconds().toString().padStart(2, '0')
    nowTime.date = myDate.getFullYear() + '-' + month + '-' + day
    nowTime.time = hour + ':' + minutes + ':' + seconed
}
setInterval(() => {
    getTime()
}, 1000)


// 获取当前星期几
const getWeekDate = () => {
    var now = new Date()
    var day = now.getDay()
    var weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
    ]
    nowTime.week = weeks[day]
}
setInterval(() => {
    getWeekDate()
}, 1000 * 60 * 60 * 24)

</script>
<style lang="less" scoped>
.lock_container {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(125deg, #E4FFCD, #6DD5FA, #2980B9, #E4FFCD);
    background-size: 400%;
    animation: bganimation 15s infinite;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 1px;
    box-sizing: border-box;
    z-index: 1;
}

.lock_container:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(10px);
    z-index: 2;
}

.lock_form {
    position: absolute;
    z-index: 11;
    width: 350px;
    height: 400px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
}

.lock_form_avatar {
    height: 120px;
    width: 120px;
    border-radius: 60px;

}

.lock_form_title {
    font-size: 50px;
    color: #fff;
    font-weight: bolder;
    margin: 10px 0;
}

.lock_form_pwd {
    height: 30px;
    width: 100%;
    outline: none;
    border: 0;
    padding: 8px;
    margin-bottom: 8px;
}

.lockHandle {
    cursor: pointer;
}
</style>